import React, { useState } from 'react'
// import { useDispatch, useStore } from 'react-redux'
import { useDispatch, useSelector } from 'react-redux'

// import React, { Component } from 'react'
// import { connect } from 'react-redux'
import animate from '@h/animate'

import { TabBar } from 'antd-mobile'

import cookbook from '@a/images/cookbook.png'
import cookbookActive from '@a/images/cookbook-active.png'
import menu from '@a/images/menu.png'
import menuActive from '@a/images/menu-active.png'
import location from '@a/images/location.png'
import locationActive from '@a/images/location-active.png'
import more from '@a/images/more.png'
import moreActive from '@a/images/more-active.png'

import { CookBook } from './cookbook/'
import { Category } from './category/'
import Map from './map/Map'
import { More } from './more/'

import { actionCreator as ac } from '@/home/category'

// @animate
// @connect(
//   // (state) => ({}),
//   (state) => ({
//     checked: state.home.checked,
//     selectedTab: state.category.routeInfo.selectedTab
//   }),
//   dispatch => ({
//     changeSelectedTab(selected) {
//       dispatch(ac.changeSelectedTab(selected))
//     }
//   })
// )
// class Home extends Component {
//   state = {
//     selectedTab: this.props.selectedTab,
//     hidden: false,
//     fullScreen: true
//   };

//   componentDidMount() {
//     // console.log(this.props.checked)
//   }
//   render() {
//     const tabItems = [
//       <TabBar.Item
//         title="美食大全"
//         key="cookbook"
//         icon={<div style={{
//           width: '22px',
//           height: '22px',
//           background: `url(${cookbook}) center center /  22px 22px no-repeat` }}
//         />
//         }
//         selectedIcon={<div style={{
//           width: '22px',
//           height: '22px',
//           background: `url(${cookbookActive}) center center /  22px 22px no-repeat` }}
//         />
//         }
//         selected={this.state.selectedTab === 'cookbook'}
//         badge={1}
//         onPress={() => {
//           this.setState({
//             selectedTab: 'cookbook',
//           });
//           this.props.changeSelectedTab('cookbook')
//         }}
//         data-seed="logId"
//       >
//         <CookBook />
//       </TabBar.Item>,
//       <TabBar.Item
//         icon={
//           <div style={{
//             width: '22px',
//             height: '22px',
//             background: `url(${menu}) center center /  21px 21px no-repeat` }}
//           />
//         }
//         selectedIcon={
//           <div style={{
//             width: '22px',
//             height: '22px',
//             background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
//           />
//         }
//         title="分类"
//         key="category"
//         badge={'new'}
//         selected={this.state.selectedTab === 'category'}
//         onPress={() => {
//           this.setState({
//             selectedTab: 'category',
//           });
//           this.props.changeSelectedTab('category')
//         }}
//         data-seed="logId1"
//       >
//         <Category />
//       </TabBar.Item>,
//       <TabBar.Item
//         icon={
//           <div style={{
//             width: '22px',
//             height: '22px',
//             background: `url(${location}) center center /  22px 22px no-repeat` }}
//           />
//         }
//         selectedIcon={
//           <div style={{
//             width: '22px',
//             height: '22px',
//             background: `url(${locationActive}) center center /  22px 22px no-repeat` }}
//           />
//         }
//         title="美食地图"
//         key="map"
//         dot
//         selected={this.state.selectedTab === 'map'}
//         onPress={() => {
//           this.setState({
//             selectedTab: 'map',
//           });
//           this.props.changeSelectedTab('map')
//         }}
//       >
//         <Map />
//       </TabBar.Item>,
//       <TabBar.Item
//         icon={{ uri: more }}
//         selectedIcon={{ uri: moreActive }}
//         title="更多"
//         key="more"
//         selected={this.state.selectedTab === 'more'}
//         onPress={() => {
//           this.setState({
//             selectedTab: 'more',
//           });
//         }}
//       >
//         <More />
//       </TabBar.Item>
//     ]
//     return (
//       <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
//         <TabBar
//           unselectedTintColor="#949494"
//           tintColor="#000"
//           barTintColor="white"
//           hidden={this.state.hidden}
//         >
//           {
//             this.props.checked ? tabItems.map(v => v) : tabItems.filter((v, i) => i !== 2)
//           }
//         </TabBar>
//       </div>
//     );
//   }
// }

const Home = (props) => {
  // const store = useStore() // store.getState().home.checked
  // const { home, category } = useStore().getState()
  // console.log(state.getIn(['home', 'checked']))
  // const { home, category } = useSelector(state => {
  //   return state
  // })

  const state = useSelector(state => state)

  // let [state, setState] = useState()
  let [tabs, setTabs] = useState({
    // selectedTab: category.routeInfo.selectedTab,
    selectedTab: state.getIn(['category', 'routeInfo', 'selectedTab']),
    hidden: false,
    fullScreen: true
  })

  let dispatch = useDispatch()
  
  const tabItems = [
    <TabBar.Item
      title="美食大全"
      key="cookbook"
      icon={<div style={{
        width: '22px',
        height: '22px',
        background: `url(${cookbook}) center center /  22px 22px no-repeat` }}
      />
      }
      selectedIcon={<div style={{
        width: '22px',
        height: '22px',
        background: `url(${cookbookActive}) center center /  22px 22px no-repeat` }}
      />
      }
      selected={tabs.selectedTab === 'cookbook'}
      badge={1}
      onPress={() => {
        setTabs({
          selectedTab: 'cookbook',
        });
        dispatch(ac.changeSelectedTab('cookbook'))
      }}
      data-seed="logId"
    >
      <CookBook />
    </TabBar.Item>,
    <TabBar.Item
      icon={
        <div style={{
          width: '22px',
          height: '22px',
          background: `url(${menu}) center center /  21px 21px no-repeat` }}
        />
      }
      selectedIcon={
        <div style={{
          width: '22px',
          height: '22px',
          background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
        />
      }
      title="分类"
      key="category"
      badge={'new'}
      selected={tabs.selectedTab === 'category'}
      onPress={() => {
        setTabs({
          selectedTab: 'category',
        });
        dispatch(ac.changeSelectedTab('category'))
      }}
      data-seed="logId1"
    >
      <Category />
    </TabBar.Item>,
    <TabBar.Item
      icon={
        <div style={{
          width: '22px',
          height: '22px',
          background: `url(${location}) center center /  22px 22px no-repeat` }}
        />
      }
      selectedIcon={
        <div style={{
          width: '22px',
          height: '22px',
          background: `url(${locationActive}) center center /  22px 22px no-repeat` }}
        />
      }
      title="美食地图"
      key="map"
      dot
      selected={tabs.selectedTab === 'map'}
      onPress={() => {
        setTabs({
          selectedTab: 'map',
        });
        dispatch(ac.changeSelectedTab('map'))
      }}
    >
      <Map />
    </TabBar.Item>,
    <TabBar.Item
      icon={{ uri: more }}
      selectedIcon={{ uri: moreActive }}
      title="更多"
      key="more"
      selected={tabs.selectedTab === 'more'}
      onPress={() => {
        setTabs({
          selectedTab: 'more',
        });
      }}
    >
      <More />
    </TabBar.Item>
  ]
  return (
    <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#000"
        barTintColor="white"
        hidden={tabs.hidden}
      >
        {
          // home.checked ? tabItems.map(v => v) : tabItems.filter((v, i) => i !== 2)
          state.getIn(['home', 'checked']) ? tabItems.map(v => v) : tabItems.filter((v, i) => i !== 2)
        }
      </TabBar>
    </div>
  );
}

// 原始hooks
// export default connect(
//   // (state) => ({}),
//   (state) => ({
//     checked: state.home.checked,
//     selectedTab: state.category.routeInfo.selectedTab
//   }),
//   dispatch => ({
//     changeSelectedTab(selected) {
//       dispatch(ac.changeSelectedTab(selected))
//     }
//   })
// )(Home)

export default animate(Home)
